<template>
    <div class="page_root" data-page-name="1" data-page-identification="a_a8cs2g7b5t">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- end vid_bno0421ix8 自定义模板_xvw8va7914 -->
            <a-modal
                :visible="show"
                width="100vw"
                wrap-class-name="full-modal"
                :body-style="{
                    height: '100vh'
                }"
                style="top: 0"
            >
                <iframe id="myIframe" :src="showUrl" allowfullscreen height="100%" width="100%"></iframe>
                <div class="box-block"></div>
            </a-modal>
            <a-button @click="open">2</a-button>
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue';
    import { useRoute, useRouter } from 'vue-router';

    const router = useRouter();
    //引入VueOfficeDocx组件
    import VueOfficeDocx from '@vue-office/docx';
    //引入相关样式
    import '@vue-office/docx/lib/index.css';
    //引入VueOfficeExcel组件
    import VueOfficeExcel from '@vue-office/excel';
    //引入相关样式
    import '@vue-office/excel/lib/index.css';
    import VueOfficePdf from '@vue-office/pdf';
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission
    } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue';
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID
    const props = defineProps({
        processInstanceId: {
            type: String
        }
    });
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true });
    };
    import ApprovalDetails from './ceshi.vue';
    /* -------------------------- 属性定义 -------------------------- */
    const now = new Date();
    const year = now.getFullYear(); // 获取年份
    const month = now.getMonth() + 1; // 获取月份（注意：月份从0开始，需要加1）
    const day = now.getDate(); // 获取日期
    const hours = now.getHours(); // 获取小时（0-23）
    const minutes = now.getMinutes(); // 获取分钟（0-59）
    const seconds = now.getSeconds(); // 获取秒钟（0-59）

    console.log(`当前时间：${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`);

    const setTimeOutList = [];
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    });
    const authInfo = localGet('app-user-store');

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name];
    };

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        processInstanceId: props.processInstanceId ?? route.query.processInstanceId
    });

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */
    const show = ref(false);
    const showUrl = ref('');
    const id1 = ref(41723);
    const type = ref(0);
    /* -------------------------- 生命周期 -------------------------- */

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer);
        });
    });
    function open() {
        show.value = true;
        showUrl.value =
            'http://asa-qa.allintechinc.com/app_50000005/process/046201cd-498e-11ef-83e9-52a5438c6e27/171c3527-1fde-11ef-a354-36d01a08a405/MyTodo';
        // 获取iframe元素
        var iframe = document.getElementById('myIframe');

        // 等待iframe加载完成
        iframe.onload = function () {
            console.log('11111');
            // 获取iframe的document对象
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

            // 获取iframe里面的元素
            var elementInIframe = iframeDoc.getElementsByClassName('back-btn');

            // 对获取到的元素进行操作
            if (elementInIframe) {
                // 例如，改变背景颜色
                elementInIframe.style.display = 'none';
            }
        };
    }
    const items = [
        {
            title: 'First',
            content: 'First-content'
        },
        {
            title: 'Second',
            content: 'Second-content'
        },
        {
            title: 'Last',
            content: 'Last-content'
        }
    ];
    const current = ref('1');
    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const previewState = reactive({
        previewVisible: false,
        previewImage: '',
        previewFileUrl: '',
        isImagePreview: false,
        isDocPreview: false,
        isPdfPreview: false,
        isExcelPreview: false,
        isViedoPreview: false,
        ppmEnclosureInfoList: [
            {
                enclosureId: null,
                uid: 'vc-upload-1709188556902-2',
                name: 'PM-SNPL02-01-水泥配料综合优化项目发文（模板）.docx',
                imgUrl: '/file-storage/427955353340762112.docx',
                size: 22668,
                status: 'done',
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                url: 'https://minio-mdi-prd.allintechinc.com:/file-storage/427955353340762112.docx',
                delFlag: null,
                projectId: null
            },
            {
                name: '关于中材株洲水泥有限责任公司数据使用的授权申请.pdf',
                type: 'application/pdf',
                uid: 'vc-upload-1711361807353-2',
                url: 'http://static.shanhuxueyuan.com/test.pdf'
            },

            {
                enclosureId: null,
                uid: 'vc-upload-1709178298154-3',
                name: 'PM-SNPL06-01-水泥配料综合优化试运行方案确认（模板）.xls',
                imgUrl: '/file-storage/427958927724533760.xls',
                size: 14598,
                status: 'done',
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                url: 'https://minio-mdi-prd.allintechinc.com/file-storage/427958927724533760.xls',
                delFlag: null,
                projectId: null
            },
            {
                enclosureId: null,
                uid: 'vc-upload-1709178298154-3',
                name: 'PM-SNPL06-03-水泥配料综合优化仿真验证标准（模板）.xlsx',
                imgUrl: '/file-storage/427959145002063872.xlsx',
                size: 14598,
                status: 'done',
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                url: 'https://minio-mdi-prd.allintechinc.com/file-storage/427959145002063872.xlsx',
                delFlag: null,
                projectId: null
            },
            {
                enclosureId: null,
                uid: 'vc-upload-1713000744894-7',
                name: '微信图片_20240413113020.jpg',
                imgUrl: null,
                size: 118770,
                status: 'done',
                type: 'image/jpeg',
                url: 'http://10.40.0.63:9001/file-storage/435949261318264832.jpg',
                delFlag: null,
                projectId: null
            },
            {
                enclosureId: null,
                uid: 'vc-upload-1721633217210-2',
                name: '测试视频.mp4',
                imgUrl: null,
                size: 65281849,
                status: 'done',
                type: 'video/mp4',
                url: 'http://10.40.0.63:9001/file-storage/454052932966946816.mp4',
                delFlag: null,
                projectId: null
            }
        ]
    });
    function previewAttachment(item) {
        if (item.type.startsWith('image')) {
            previewState.isExcelPreview = false;
            previewState.isImagePreview = true;
            previewState.isDocPreview = false;
            previewState.isViedoPreview = false;
            previewState.isPdfPreview = false;
            previewState.previewImage = item.url; // 设置预览图片的URL
            previewState.previewVisible = true; // 显示模态框
        } else if (isDocFile(item.name, '.pdf')) {
            previewState.isImagePreview = false;
            previewState.isDocPreview = false;
            previewState.isViedoPreview = false;
            previewState.isPdfPreview = true;
            previewState.isExcelPreview = false;
            previewState.previewFileUrl = item.url; // 设置预览PDF的URL
            previewState.previewVisible = true; // 显示模态框
        } else if (isDocFile(item.name, '.doc')) {
            previewState.isImagePreview = false;
            previewState.isDocPreview = true;
            previewState.isViedoPreview = false;
            previewState.isPdfPreview = false;
            previewState.isExcelPreview = false;
            previewState.previewFileUrl = item.url; // 设置预览WORD的URL
            previewState.previewVisible = true; // 显示模态框
        } else if (isDocFile(item.name, '.docx')) {
            previewState.isExcelPreview = false;
            previewState.isImagePreview = false;
            previewState.isViedoPreview = false;
            previewState.isDocPreview = true;
            previewState.isPdfPreview = false;
            previewState.previewFileUrl = item.url; // 设置预览WORD的URL
            previewState.previewVisible = true; // 显示模态框
        } else if (isDocFile(item.name, '.xls')) {
            options.value.xls = true;
            previewState.isViedoPreview = false;
            previewState.isImagePreview = false;
            previewState.isDocPreview = false;
            previewState.isPdfPreview = false;
            previewState.isExcelPreview = true;
            previewState.previewFileUrl = item.url; // 设置预览EXCEL的URL
            previewState.previewVisible = true; // 显示模态框
        } else if (isDocFile(item.name, '.xlsx')) {
            options.value.xls = false;
            previewState.isImagePreview = false;
            previewState.isDocPreview = false;
            previewState.isPdfPreview = false;
            previewState.isViedoPreview = false;
            previewState.isExcelPreview = true;
            previewState.previewFileUrl = item.url; // 设置预览EXCEL的URL
            previewState.previewVisible = true; // 显示模态框
        } else if (item.type.startsWith('video')) {
            options.value.xls = false;
            previewState.isImagePreview = false;
            previewState.isDocPreview = false;
            previewState.isPdfPreview = false;
            previewState.isViedoPreview = true;
            previewState.isExcelPreview = false;
            previewState.previewFileUrl = item.url; // 设置预览EXCEL的URL
            previewState.previewVisible = true; // 显示模态框
        } else {
            message.warning('暂不支持的文件格式');
        }
    }
    function isDocFile(fileName, str) {
        return fileName.toLowerCase().endsWith(str);
    }

    function handleCancel() {
        previewState.isExcelPreview = false;
        previewState.isImagePreview = false;
        previewState.isDocPreview = false;
        previewState.isViedoPreview = false;
        previewState.isPdfPreview = false;
        previewState.previewVisible = false; // 显示模态框
    }
    function renderedHandler() {
        message.success('渲染成功');
    }
    function errorHandler(e) {
        message.error('渲染失败');
        console.log('失败', e);
    }

    const options = ref({
        xls: true, //预览xlsx文件设为false；预览xls文件设为true
        minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
        minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
        widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
        heightOffset: 10 //在默认渲染的列表高度上再加 Npx高
    });
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .full-modal {
        .ant-modal {
            max-width: 100%;
            top: 0;
            padding-bottom: 0;
            margin: 0;
        }
        .ant-modal-content {
            display: flex;
            flex-direction: column;
            height: calc(100vh);
        }
        .ant-modal-body {
            flex: 1;
        }
    }
    #myIframe {
        position: relative;
        margin-top: 20px;
    }
    .box-block {
        width: 80px;
        height: 45px;
        background-color: #fff;
        position: absolute;
        top: 40px;
    }
</style>
